<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div @click="showTotalInstanceDialog">
          <el-statistic group-separator="," :precision="0" :value-style="{ color: '#3f8600', cursor: 'pointer' }" :value="todayNum" :title="'今日样本'">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="cursor: pointer" @click="showActiveShift">
          <el-statistic group-separator="," :value-style="{ color: '#3f8600', cursor: 'pointer' }" :value="activeShifts.length" :title="'可用班次'">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="0" :value="0" :title="'其他'"></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="0" :value="0" :title="'其他'"></el-statistic>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="可用班次" :visible.sync="activeShiftListShowable" @click="closeDialog(activeShiftListShowable)">
      <el-empty v-if="!activeShifts || activeShifts.length === 0" description="暂无数据"></el-empty>
      <el-table v-if="activeShifts && activeShifts.length > 0" :data="activeShifts">
        <el-table-column property="name" label="班次信息"></el-table-column>
        <el-table-column property="shiftDate" label="日期"></el-table-column>
        <el-table-column property="startTime" label="开始时间" ></el-table-column>
        <el-table-column property="endTime" label="结束时间"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="startShift(scope.$index, scope.row)">开始</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="今日样本" :visible.sync="todayInstanceShowable" @click='closeDialog(activeShiftListShowable)'>

      <el-empty v-if="!todayInstance || todayInstance.length === 0" description="暂无数据"></el-empty>
      <el-table v-if="todayInstance && todayInstance.length > 0" :data="todayInstance">
        <el-table-column property="name" label="所属问卷"></el-table-column>
        <el-table-column property="shiftDate" label="收集时间"></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="startShift(scope.$index, scope.row)">开始</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import {activeShift} from '../api/home';

  export default {
    data() {
      return {
        todayNum: 0,
        activeShifts: [],
        todayInstance: [],
        activeShiftListShowable: false,
        todayInstanceShowable: false
      }
    },
    created() {
      this.selectActiveShift();
    },
    // 注册组件
    components: {
    },
    methods: {
      closeDialog(sy) {
        sy = false;
      },
      selectActiveShift() {
        activeShift().then(resp => {
          this.activeShifts = resp.data;
        })
      },
      showActiveShift() {
        this.activeShiftListShowable = true;
        this.selectActiveShift();
      },
      showTotalInstanceDialog() {
        this.todayInstanceShowable = true;
      },
      startShift(index, row) {
        return this.$router.push({ path: '/base/work/start', query: {id: row.surveyId}});
      }
    }
  }
</script>
